@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer base {
  h1 {
    @apply text-4xl font-bold md:text-5xl lg:text-6xl  tracking-tight;
  }
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold mb-4 scroll-mt-28;
  }
  h3 {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold mb-2 scroll-mt-28;
  }
  h4 {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold mb-2 scroll-mt-28;
  }
  h5 {
    @apply text-base md:text-lg lg:text-xl font-medium mb-2 scroll-mt-28;
  }
  h6 {
    @apply text-sm md:text-base lg:text-lg font-medium mb-2 scroll-mt-28;
  }

  input,
  optgroup,
  select,
  textarea {
    @apply text-black;
  }
}
